import {size} from '@/app/utils';
import React,{useState,useEffect,useContext} from 'react';
import {
  View,
  Text,
  Image,
  TextInput,
  StatusBar,
  Pressable
} from 'react-native';
import Button from '@/app/components/Button'
import {styles} from './style/LoginScreenCss'
import Headers from '@/app/components/header/Headers';
import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
import { getEamilCode } from './serve'
import { useTranslation } from '@/app/utils/useTranslation';
import { useNavigation } from "@react-navigation/native";
let RegisteredScreen = (props:any)=>{
    const { t } = useTranslation();
    const [isSelected, setSelection] = useState(false);
    let [tabIndex,setTabIndex] = useState('0');
    const navigation:any = useNavigation();
    let [phone,setPhone] = useState('');
    let [code,setCode] = useState('');
    let [disabled,setDisabled] = useState(false);

    function handleLogin() {
        if(!phone){
           return global.$toast({message:'Please input email!'})
        }
        // 邮箱格式校验（仅在 Email 模式下）
        if(tabIndex+''=='0'){
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if(!emailRegex.test(phone)){
                return global.$toast('邮箱不合法！')
            }
        }
        let params={
            "loginName":phone,
            // "password":password,
            "code":code,
        }
        if(!isSelected){
            return global.$toast({message:t('t399')});
        }
        let dataParams = {
            "loginName":phone,
        }
        setDisabled(true);
        getEamilCode(dataParams).then(()=>{
            return global.$toast({message:t('t82'),callback:()=>{
                navigation.navigate('pages/auth/ForgetPasswordStep2Screen',{name:'zhuce',...params})
                setDisabled(false);
            }});
        }).catch(()=>{
            setDisabled(false);
        })
    }
    function onLogin(){
        navigation.goBack();
    }

    useEffect(()=>{
            StatusBar.setBarStyle('dark-content');
    },[]);

    return (
         <View style={{ flex: 1,backgroundColor:"#fff"}}>
            <Headers
                title={''}
                border={false}
                barStyle={0}
                leftTitle={''}
                backgroundColor={'#fff'}
                centerColor={'#666'}
                {...props}
                leftIcon={require('@/assets/images/icon/back.png')}
                 rightContent={
                    <View>
                        <Pressable onPress={()=>onLogin()}>
                            <View>
                                <Text style={{color:'#38B781',fontSize:size(14)}}>{t('t371')}</Text>
                            </View>
                        </Pressable>
                    </View>
                }
            />
            <KeyboardAwareScrollView style={{flex:1,paddingTop:size(30)}} resetScrollToCoords={{ x: 0, y: 0 }} contentContainerStyle={{ flexGrow: 1 }} scrollEnabled={true} enableOnAndroid={true} extraScrollHeight={20} keyboardOpeningTime={0}>
                <View style={{ flex:1}}>
                    <View style={styles.form}>
                        <View style={styles.logobox}>
                            <Image
                                source={
                                    require('@/assets/images/auth/logo2.png')
                                }
                                style={[styles.IconImage]}
                            />
                        </View>
                        <View>
                            <View>
                                <Text style={styles.title}>{t('t386')}</Text>
                            </View>
                            <View>
                                <Text style={styles.subtitle}>{t('t396')}</Text>
                            </View>
                        </View>
                        <View style={styles.tabbox}>
                            <Pressable onPress={()=>{
                                setTabIndex('0');
                                setPhone('');
                            }} style={[styles.tabItem,tabIndex+''=='0'?styles.tabItemActive:null]}>
                                <Text style={[styles.tabtext,tabIndex+''=='0'?styles.tabtextActive:null]}>{t('t366')}</Text>
                            </Pressable>
                            <Pressable onPress={()=>{
                                global.$toast({message:t('t29')})
                            }} style={[styles.tabItem,tabIndex+''=='1'?styles.tabItemActive:null]}>
                                <Text style={[styles.tabtext,tabIndex+''=='1'?styles.tabtextActive:null]}>{t('t367')}</Text>
                            </Pressable>
                        </View>
                        <View style={styles.formItem}>
                            <TextInput
                                value={phone}
                                inputMode={tabIndex+''=='0'?'email':'tel'}
                                onChangeText={(text) => {
                                    setPhone(text)
                                }}
                                style={styles.input} placeholder={tabIndex+''=='0'?t('t368'):t('t369')}/>
                        </View>
                        {/* <View style={[styles.formItem, { marginTop: 15 }]}>
                            <TextInput
                                value={password}
                                readOnly={disabled}
                                onChangeText={(text) => {
                                    setPassword(text);
                                }} style={styles.input} placeholder={'Input password'} secureTextEntry={!eye1}/>
                                 <Pressable onPress={()=>{
                                    setEye1(!eye1);
                                }}>
                                    <Image style={styles.icon} source={eye1?require('@/assets/images/noeye.png'):require('@/assets/images/eye.png')} />
                                </Pressable>
                        </View> */}
                        {/* <View style={[styles.formItem, { marginTop: 15 }]}>
                            <TextInput
                                value={password}
                                onChangeText={(text) => {
                                    setPassword(text);
                                }} style={styles.input} placeholder={'Confirm password'} secureTextEntry={!eye}/>
                                <Pressable onPress={()=>{
                                    setEye(!eye);
                                }}>
                                    <Image style={styles.icon} source={eye?require('@/assets/images/noeye.png'):require('@/assets/images/eye.png')} />
                                </Pressable>
                        </View> */}
                        <View style={styles.inputContainer} >
                            <Text style={styles.inputContainertext}>{t('t400')}</Text>
                        </View>
                         <View style={[styles.formItem, { marginTop: 10 }]}>
                            <TextInput
                                readOnly={disabled}
                                value={code}
                                onChangeText={(text) => {
                                    setCode(text);
                                }} style={styles.input} placeholder={t('t401')}/>
                        </View>
                        <View style={styles.rulestextbox}>
                             <Pressable style={styles.checkbox} onPress={()=>{
                                setSelection(isSelected?false:true);
                            }}>
                                {isSelected?<Image
                                    source={
                                        require('@/assets/images/dui.png')
                                    }
                                    style={{width:size(14),height:size(14)}}
                                />:null}
                            </Pressable>
                            <View style={{flex:1,marginLeft:size(6)}}>
                                <Text style={styles.rulestextgroup}>{t('t866')} <Text onPress={()=>{
                                    navigation.navigate('userRules');
                                }} style={styles.rulestext}>{t('t402')}</Text> {t('t403')} <Text onPress={()=>{
                                    navigation.navigate('userYSRules');
                                }} style={styles.rulestext}>{t('t404')}</Text></Text>
                            </View>
                        </View>
                        <View style={[{ marginTop: 20 }]}>
                            <Button 
                                onClick={() => {
                                    handleLogin();
                                }}
                                disabled={disabled}
                                style={styles.login_box_footer_btn}
                            >
                                <Text style={styles.login_box_footer_btn_text}>{t('t255')}</Text>
                            </Button>
                        </View>
                    </View>
                </View>
            </KeyboardAwareScrollView>
        </View>
    )
}

export default RegisteredScreen;